<template>
    <div class = "mask" @click = "maskClick" catchtouchmove>
        <div class="container" @click.stop = "stopPropagation">
            <h3>支付19元</h3>
            <p class = "deduction">
                <MyRadio
                    color = "#707070"
                    activeColor = "#DB4723"
                    size = "35"
                    @change = "IntegralChange"
                 />
                 <span>50知识币可抵扣一元</span>
            </p>
            <p class = "buy-button">支付</p>
        </div>
    </div>
</template>
<script>
import MyRadio from "./MyRadio";
export default {
    data(){
        return {
            isIntegral: false
        }
    },
    methods: {
        IntegralChange(state){
            this.isIntegral = state;
        },
        maskClick(){
            this.$emit("maskClick");
        },
        stopPropagation(){

        }
    },
    components: {
        MyRadio
    }
}
</script>
<style lang = "scss" scoped>
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
    }
    .container{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 424rpx;
        background-color: white;
        h3{
            padding-top: 52rpx;
            text-align: center;
            @include font-color-height(44rpx,#333);
        }
        .deduction{
            padding-top: 25rpx;
            text-align: center;
            span{
                padding-left: 10rpx;
                vertical-align: top;
                @include font-color-height(24rpx,#999);
            }
        }
        .buy-button{
            margin: 100rpx auto 0;
            background-color: $activeColor;
            text-align: center;
            @include width-height(354rpx,84rpx);
            @include box-radius-border(42rpx);
            @include font-color-height(30rpx,white,84rpx);
        }
    }
</style>